<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>09 TextTest</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <script src="../dist/xtype-svg.js"></script>
    <script>
        var dom = XType.SVG.create({
            xtype: 'svg',
            parent: document.body,
            attr: {
                width: 400,
                height: 400,
                viewBox: '0 0 400 400'
            },
            children: [{
                xtype: 'text',
                html: 'Hello, out there',
                attr: {
                    x: 0,
                    y: 35,
                    'font-family': 'Verdana',
                    'font-size': 35,
                    transform: 'rotate(30 20,40)',
                    fill: '#0000ff',
                    stroke: '#00ff00'
                },
                listeners: {
                    click: () => {
                        alert('You clicked!');
                    }
                }
            }]
        });

        dom.render();
    </script>
</body>

</html>